<template>
  <el-header class="header" height="45px">
    <div>
      <!-- <IconFont name="icon-newlogo" type="class" class="logo"/>
      <IconFont name="icon-logo-short" type="class" class="small-logo"/> -->
    </div>
    <div class="lang-box" @click="changeLang">
      {{lang}}
    </div>
    <ul class="header-nav">
      <li v-for="(item, index) in menu" :key="index">
        <router-link v-bind:to = item.href>{{item.name}}</router-link>
      </li>
    </ul>
    <div class="header-nav-dropdown">
       <el-dropdown trigger="click" @command="clickMenuItemsCallback">
        <span class="el-dropdown-link">
          {{currentModuleName}}<i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu class="header-nav-el-dropdown-menu" slot="dropdown">
          <el-dropdown-item  v-for="(item, index) in menu" :key="index" v-bind:command = item.name>
            <router-link v-bind:to = item.href>{{item.name}}</router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="header-message">
      <router-link to="/">
        <IconFont name="icon-notice" type="class"/>
      </router-link>
    </div>
    <el-dropdown class="header-user">
      <span class="el-dropdown-link">
        <span class="header-user-text">用户名<i class="el-icon-caret-bottom el-icon--right"></i></span>
        <span class="header-user-icon">
          <IconFont name="icon-user" type="class" class=""/>
        </span>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>我的投票</el-dropdown-item>
        <el-dropdown-item>我的资产</el-dropdown-item>
        <el-dropdown-item>我的点卡</el-dropdown-item>
        <el-dropdown-item>用户中心</el-dropdown-item>
        <el-dropdown-item class="header-user-message">消息</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>

<script>
import IconFont from '@/components/Iconfont/Iconfont'
// import { store } from '@/utils/store'
export default {
  name: 'Header',
  components: { IconFont },
  data () {
    return {
      activeIndex: '1',
      options: [{
        value: '中文',
        label: '中文'
      }, {
        value: 'EN',
        label: 'EN'
      }],
      value: '',
      lang: localStorage.lang.toUpperCase() || 'CN',
      currentModuleName: '超级社区',
      menu: [{
        name: '超级社区',
        href: '/'
      }, {
        name: '节点投票',
        href: '/'
      }, {
        name: 'DApp产品区',
        href: '/'
      }, {
        name: 'POW矿池',
        href: '/'
      }, {
        name: 'APP下载',
        href: '/'
      }]
    }
  },
  created () {
    // console.log(store.get('i18n'))
  },
  methods: {
    changeLang (e) {
      this.lang = this.lang === 'CN' ? 'EN' : 'CN'
      // console.log()
      this.$i18n.locale = this.lang.toLowerCase()
      window.localStorage.setItem('lang', this.$i18n.locale)
    },
    clickMenuItemsCallback (command) {
      this.currentModuleName = command
    }
  }
}
</script>
<style lang="stylus">
.header
  display -webkit-box
  height 3.75rem
  background-color #232838
  color #C5CDDE
  a
    color #C5CDDE
    &:hover
      color #6F91F8
.logo
  display inline-block
  font-size 1.666667rem
  line-height 3.7rem
.small-logo
  display none
.header-nav
  display flex
  -webkit-box-flex 1
  li
    font-size 1.1667rem
    padding 0 1.25rem
.header-user
.header-nav-dropdown .el-dropdown
  color #C5CDDE
  cursor pointer
  margin-left 1rem
.lang-box
  border 1px solid #C7CDE6
  margin: 1.1rem 0 0 1rem
  height: 1.5rem
  line-height: 1.5rem
  width 2.3rem
  border-radius 2px
  cursor pointer
@media screen and (max-width: 320px)
  .logo
    display none
  .small-logo
    display block
    font-size (20/12)rem
@media screen and (max-width: 980px)
  .header-nav
    display none
  .header-nav-dropdown
    display: -webkit-box;
    -webkit-box-flex: 1;
    -webkit-box-pack: start;
    margin-left 0.2rem
  .header-message
    display none
  .header-user-icon
    display block
  .header-user-text
    display none
@media screen and (min-width: 981px)
  .header-nav
    display flex
  .header-nav-dropdown
    display none
  .header-nav-el-dropdown-menu
    display none
  .header-message
    display block
  .header-user-icon
    display none
  .header-user-text
    display block
  .header-user-message
    display none
</style>
